﻿

<html>
<head>
<title>CSS3 Border-Image Test</title>

<style type="text/css">
h3 {border-image: tile("flagbg.gif", 10%, 10%, 10%, 10%) repeat-x; border-style: solid;}
h4 {border-image: tile("ovalbbut.gif", 15%, 15%, 15%, 15%) repeat-y; border-style: solid;}
em {border-image: tile("nist.gif", 20%, 20%, 20%, 20%) stretch no-repeat; border-style: solid;}
blockquote {border-image: 200%; border-style: solid;}
p {border-style: solid;}
</style>
</head>

<body>




<h1>CSS3 Border-Image Test</h1>





<ul>
<li >
For "border-image", initial is none, it applies to all elements,
it is not inherited, percentage values are N/A, media is visual, and computed value
is specified value, with any URI made absolute.
</li>
</ul>
<h2>
PASS CRITERIA:
</h2>
NOTE: This property may not be implemented yet.
<p>
If statement above is correct, this paragraph should have border-image set according
to initial values of individual properties.  A CSS rule of "border-style: solid" is applied.  However, the
border-image property does apply to the p element.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</p>
<h3>
This h3 heading has a border-image of tile(flagbg.gif, 10%, 10%, 10%, 10%) repeat-x, but this <em>emphasized text
</em> has a border-image of tile(nist.gif, 20%, 20%, 20%, 20%) stretch no-repeat; the rules applied are:
"h3 {border-image: tile(flagbg.gif, 10%, 10%, 10%, 10%) repeat-x;}"
"em {border-image: tile(nist.gif), 20%, 20%, 20%, 20%) stretch no-repeat;}"
So the border-image property applies to the h3 and em elements.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</h3>
<h4>
This h4 heading has a border-image of tile(ovalbbut.gif, 15%, 15%, 15%, 15%) repeat-y (because of the
rule "h4 {border-image: tile(ovalbbut.gif, 15%, 15%, 15%, 15%) repeat-y;}", but these <i>italicized words</i>
have a border-image of (none), because the border-image
property does not inherit.  
So the border-image property does apply to the h4 and i elements.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</h4>
<blockquote>
This blockquote element should have a UA-default border-image.  The
nonsensical rule "blockquote {border-image: 200%}" should be ignored,
but the border-image property does apply to the blockquote element.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</blockquote>
<p>
All other properties of this page should be UA-default.
This is a paragraph, like the one above. Border-style of solid is applied to all rules,
so that if the image specified is unavailable a solid border will appear.
</p>

</body>
</html>
